<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>出勤记录统计</title>
     <link rel="stylesheet" href="<%=path %>/siteresource/css/global.css" type="text/css"/>
	<link rel="stylesheet" href="<%=path %>/siteresource/css/list.css" type="text/css"/>
	<link rel="stylesheet" href="<%=path %>/siteresource/css/menu.css" type="text/css"/>
    <style>
#box {
	margin: 0px auto;
	width: 78%;
}
#status div{
  border:1px solid red;
	width: 20px;
	height: 70px;
	margin: 2px;
	background-color: #E0ECFF;
	font-size: 14px;
	line-height: 20px;
	color: black;
	vertical-align: middle;
	text-align:center;
	float: left;
	text-algin: center;
	cursor: pointer;
  
}
#divs div { 
   border:1px solid red;
	width: 20px;
	height: 70px;
	margin: 2px;
	background-color: #E0ECFF;
	font-size: 14px;
	line-height: 20px;
	color: black;
	vertical-align: middle;
	text-align:center;
	float: left;
	text-algin: center;
	cursor: pointer;
}

#divs  div .myclass { 

	background: url(images/ok.png) no-repeat 0px 0px;
	width: 16px;
	height: 16px;
}
#divs div .liveclass{
  
   background: url(images/no.png) no-repeat 0px 0px;
			width: 16px;
			height: 16px;
}

#divs div .laterclass{
  
   background: url(images/li_err.gif) no-repeat 0px 0px;
			width: 16px;
			height: 16px;
}

#divs {
	width: 100%;
	margin: 10px auto;
	position: relative;
}
#divs .oneclass{
   background:pink;
}
br {
	clear: both;
}
</style>

<script type="text/javascript" src="jquery-easyui-1.2.6/plugins/jquery.datebox.js"></script>
	<link rel="stylesheet"
		href="jquery-easyui-1.2.6/themes/default/easyui.css" type="text/css"></link>
	<link rel="stylesheet" href="jquery-easyui-1.2.6/themes/icon.css"
		type="text/css"></link>
	<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript"
		src="jquery-easyui-1.2.6/plugins/jquery.combotree.js"></script>
	<script type="text/javascript"
		src="jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript">
	window.onload=function(){
		$('#btnOk').linkbutton();   
	};
	   $(function(){
		   
		   $('#cc').combotree({
				url : '/jboa/stuAction_loadData',
				loadFilter : 
					function(data) {
						change(data);
						$.each(data,function (i,v){
							v.iconCls="icon-ok"
						})
						return data;
			        }
			});
		   
		   
		   var innerDivs = document.getElementById('divs');
			function boxs(data) {
				var boxs = '';
				innerDivs.innerHTML = '';

				$.each(eval("(" + data + ")"), function(i, dom) {
					/*if (i % 4 == 0) {
						boxs += '<br />';
					}*/
					boxs += '<div readonly="readonly" myid='+dom.sid+' status="0">' + dom.sname
							+ '</div>';
				});
				
				innerDivs.innerHTML += boxs;
			};
			
			/*发送ajax请求
			*/
			
			$('#btnOk').linkbutton().click(function(){
				$("#dates").html("");
				$("#status").html("");
				 var fromdate = $('#start').datetimebox('getValue');
				 var todate=$('#end').datetimebox('getValue');
				//发送ajax请求
				$.ajax({
					url : '/jboa/stuAction_getStuList',
					type : 'POST',
					data : 'gradeid='+$('#cc').combotree('getValues')[0],
					success : function(data) {
						boxs(data);
						//加载日期数据
						$.ajax({
							url : '/jboa/stuRecordAction_getStuListByParam',
							type : 'POST',
							data : {'gradeid':$('#cc').combotree('getValues')[0],'start':fromdate,'end':todate},
							success : function(data) {
								//加载日期数据
								$.each(eval("(" + data + ")"), function(i, dom) {
								    var mydate=dom.substring(0,dom.indexOf(' '));
									$("#dates").append(mydate);
									
									//加载日期对应的状态   
									$.ajax({
										url : '/jboa/stuRecordAction_list',
										type : 'POST',
										data : {'gradeid':$('#cc').combotree('getValues')[0],'rdate':dom},
										success : function(data) {
											//加载日期数据
											$.each(eval("(" + data + ")"), function(i, dom) {
											    var sta=dom.isLater;
												$("#status").append("<div>"+sta+"</div>");
												//加载日期对应的状态
											});
									   }
									});
									 $("#status").append("<br/><br/>");
								  

									
									
									
									
									
									
									
									
								});
							}
						});
					}
				});
			});   
			
			
			//日期控件
			$('#start').datebox({   
			    required:true
			});  
			$('#end').datebox({   
			    required:true
			});  
	   });
	 
	   
	   function change(data){
			if(!data.length){
				data.text=data.name;
				if(data.children){
					change(data.children);
				}
			}else{
				$.each(data,function (i,v){
						change(v);
				}); 
			}
		}
	</script>

  </head>
  
  <body>
   <div id="box" class="infolist">
     <center><h1 style="margin-bottom:15px;">这里是【考勤记录检索】页面</h1></center>  
     <div class="searchPro">
			&nbsp;班 级： <select id="cc" style="width:200px;"></select><br/><br/>
			开始日期：<input id="start" name="start" readonly="readonly"></input>
			结束日期：<input id="end" name="end" readonly="readonly"></input>
			<a id="btnOk" iconCls="icon-search">查询信息</a>  
     </div>
     <p id="divs" style="margin-left:80px;"></p>
		<br/>
		<div id="databox">
		    <div id="dates" style="float:left;width:82px;">
	        
		    </div>
		    <div id="status" style="float:left;border:0px solid red">
		    
		    </div>
		</div>
		
     <div id="say" style="clear:both;">
       说明:   1.<img src="images/ok.png"/>：出勤
		  2.<img src="images/no.png"/>：缺勤
		  3.<img src="images/li_err.gif"/>：迟到<br/><br/>
     </div>
   </div>
 
  </body>
</html>
